<template>
    <a-spin :tip="$t('loadingText')" :spinning="spinning">
        <a-layout :style="{
                height: mainStore().containerHeight - mainStore().headHeight + 'px',
            }">
            <a-layout-header style="height: 25px;">
                <menu-button :baseMenuButton="baseMenuButton" @callFunc="callFunc" />
            </a-layout-header>
            <a-layout-content>
                <a-table rowKey="id" :scroll="{
                        x: 1000 /** x是columns的sum(width)值，且不能小于sum */,
                        y:
                            mainStore().containerHeight -
                            mainStore().headHeight -
                            125 /** 这里是动态调节table的下拉滚动高度，100是我根据当前页面写的固定减去，不是惟一的。你们要根据自己的页面去写固定减去 */,
                    }" :pagination="false" :data-source="dataSource" childrenColumnName="childrens"
                    :rowSelection="rowSelection">
                    <a-table-column data-index="code" :width="180" :title="$t('upperComputer.menu.menuCode')" ellipsis />
                    <a-table-column data-index="displayName" :width="200" :title="$t('upperComputer.menu.menuName')"
                        ellipsis />
                    <a-table-column data-index="icon" :width="160" :title="$t('upperComputer.menu.icon')" ellipsis />
                    <a-table-column data-index="sort" :width="160" :title="$t('upperComputer.menu.sort')" align="center"
                        ellipsis />
                    <a-table-column data-index="isActive" :width="160" :title="$t('upperComputer.menu.isActive')"
                        align="center" ellipsis>
                        <template #default="item">
                            <a-tag :color="getIsActive(item, 0)">
                                {{ getIsActive(item, 1) }}
                            </a-tag>
                        </template>
                    </a-table-column>
                    <a-table-column data-index="description" :title="$t('upperComputer.menu.description')" ellipsis />
                </a-table>
            </a-layout-content>
        </a-layout>
    </a-spin>

    <a-modal :title="$t('menuButton.' + (currentRow ? 'put' : 'post'))" centered :visible="addOrEditVisible"
        :confirm-loading="spinning" :maskClosable="false" @ok="handleOk" @cancel="handleCancel">
        <add-or-edit v-if="addOrEditVisible" ref="addOrEditRef" :id="id" :code="code" />
    </a-modal>
</template>

<script setup lang='ts'>
import i18n from '@/i18n';
import AddOrEdit from './add-or-edit.vue';
import MenuButton from '@/components/menu-button/index.vue';
import type { MenuButtonResultDto } from '@/models/menu-button';
import { mainStore } from '@/store/main';
import type { MenuResultDto } from '@/models/menu';
import { computed, onMounted, ref, unref, type Ref } from 'vue';
import { getMenusApi, deleteMenuApi } from '@/services/menu';
import { message } from 'ant-design-vue';
import { confirm } from '@/utils';

defineProps<{ baseMenuButton: Array<MenuButtonResultDto> }>();

const spinning: Ref<boolean> = ref<boolean>(false);
const dataSource: Ref<Array<MenuResultDto>> = ref<Array<MenuResultDto>>(new Array<MenuResultDto>);
const currentRow: Ref<MenuResultDto | null> = ref<MenuResultDto | null>(null);
const selectedRowKeys: Ref<Array<string>> = ref<Array<string>>(new Array<string>);
const rowSelection = computed(() => {
    return {
        type: 'radio',
        selectedRowKeys: unref<Array<string>>(selectedRowKeys),
        onChange: (changableRowKeys: Array<string>, selectedRows: Array<MenuResultDto>) => {
            currentRow.value = selectedRows[0];
            selectedRowKeys.value = changableRowKeys;
        }
    }
});

const id: Ref<number> = ref<number>(0);
const code: Ref<string> = ref<string>('');
const addOrEditVisible: Ref<boolean> = ref<boolean>(false);
const addOrEditRef = ref();

onMounted(async () => {
    await search();
})

/**
 * 获取数据
 */
async function search(): Promise<void> {
    spinning.value = true;
    dataSource.value = await getMenusApi();
    currentRow.value = null;
    selectedRowKeys.value = new Array<string>;
    spinning.value = false;
}

/**
 * 判断isActive:item是数据集合，type是类型。0代表着tag的type，1代表着要返回的中英文
 * @param item 
 * @param type 
 */
function getIsActive(item: any, type: number): string {
    const code: boolean = item.record.isActive;
    if (!type) {
        return code ? 'success' : 'default';
    }
    return i18n.global.t('upperComputer.menu.' + code);
}

function callFunc(funcName: string): void {
    eval(funcName + '()');
}

function post(): void {
    id.value = 0;
    code.value = '';
    addOrEditVisible.value = true;
}

function put(): void {
    if (!currentRow.value) {
        message.warning(i18n.global.t('common.editOne'));
        return;
    }
    id.value = currentRow.value.id;
    code.value = currentRow.value.code;
    addOrEditVisible.value = true;
}

async function remove(): Promise<void> {
    if (!currentRow.value) {
        message.warning(i18n.global.t('common.delOne'));
        return;
    }
    if (await confirm(i18n.global.t('common.delConfirmTitle'), i18n.global.t('common.delConfirmContent'))) {
        await deleteMenuApi(currentRow.value.id);
        message.success(i18n.global.t('common.delSuccess'));
        await search();
    }
}

async function handleOk(): Promise<void> {
    spinning.value = true;
    const isOk: boolean = await addOrEditRef.value.ok();
    if (isOk) {
        handleCancel();
        await search();
    }
    spinning.value = false;
}

function handleCancel(): void {
    addOrEditVisible.value = false;
}
</script>

<style lang="less" scoped>
.ant-layout-header {
    line-height: 0px;
}
</style>